<script>
import {Button, Cell, DropdownItem, DropdownMenu, NavBar, Tag} from "vant";

export default {
name: "WorkOrderView",
data() {
  return {
// 筛选条件
    filterOptions: {
      dateRange: '',
      priority: '',
      ticketType: '',
      status: '',
    },
    // 下拉选项
    dateOptions: [
      { text: '工单日期', value: '' },
      // { text: '今天', value: 1 },
      // { text: '本周', value: 2 },
      // { text: '本月', value: 3 },
    ],
    priorityOptions: [
      { text: '优先级', value: '' },
      // { text: '普通', value: 1 },
      // { text: '紧急', value: 2 },
      // { text: '特急', value: 3 },
    ],
    ticketTypeOptions: [
      { text: '工单类别', value: '' },
      // { text: '维修', value: 1 },
      // { text: '维保', value: 2 },
      // { text: '巡检', value: 3 },
    ],
    statusOptions: [
      { text: '全部', value: '' },
      // { text: '详情', value: 1 },
      // { text: '已完成', value: 2 },
    ],
    // 工单列表
    tickets: [],
    formInline: {},
    pid1:0,
    userId:0,
    }
  },
  methods:{
    findAll(){
      this.axios.post(`http://localhost:9999/api-work-order-service/work-order/findAll`, this.filterOptions).then(res => {
        this.tickets = res.data.data;
        console.log(res)
        console.log(this.list)
      })
    },
    onBack() {
      this.$router.go(-1);
    },
    handleTicket(id) {
      this.$router.push({path: '/workorderxq', query: {id: id}})
      console.log(id)
    },
    getPriorityStyle(priority) {
      switch (priority) {
        case '特急':
          return { color: '#f44336' };
        case '紧急':
          return { color: '#ff9800' };
        default:
          return { color: '#2196f3' };
      }
    },
    userhq(){
      const item = localStorage.getItem('aa');
      const aaaa= JSON.parse(item)
      let name= aaaa['username'];
      let phone= aaaa['phone'];
      let userId= aaaa['userId'];
      let pid = aaaa['pid'];
      this.pid1=pid;
      this.userId=userId;
      console.log(this.pid1);
      console.log(this.userId);
      console.log(name);
      console.log(phone);
    },
  },
  created() {
    this.findAll();
    this.userhq();
    if(this.pid1===1){
      console.log("权限足够")
    }else{
      this.$router.push({path: '/wo-de', query: {pid: this.userId}})
      console.log("权限不足",this.pid1)
    }
  },
  components: {
    [NavBar.name]: NavBar,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Cell.name]: Cell,
    [Tag.name]: Tag,
    [Button.name]: Button,
  },
}
</script>

<template>
  <div class="ticket-view">
    <!-- 顶部导航栏 -->
    <van-nav-bar
        title="运维工单"
        left-arrow
        @click-left="onBack"
        fixed
    />

    <!-- 筛选菜单 -->
    <div class="filter-container">
      <van-dropdown-menu>
        <van-dropdown-item
            v-model="filterOptions.dateRange"
            :options="dateOptions"
        />
        <van-dropdown-item
            v-model="filterOptions.priority"
            :options="priorityOptions"
        />
        <van-dropdown-item
            v-model="filterOptions.ticketType"
            :options="ticketTypeOptions"
        />
        <van-dropdown-item
            v-model="filterOptions.status"
            :options="statusOptions"
        />
      </van-dropdown-menu>
    </div>

    <!-- 工单列表 -->
    <div class="ticket-list">
      <div v-for="ticket in tickets" :key="ticket.id" class="ticket-item">
        <div class="ticket-header">
          <div class="ticket-id">编号：{{ ticket.workOrderNumber }}</div>
          <!--标签状态右对齐-->
          <div class="ticket-status">
            <van-tag v-if="ticket.status === 1" type="success">普通</van-tag>
            <van-tag v-if="ticket.status === 2" type="warning">紧急</van-tag>
            <van-tag v-if="ticket.status === 3" type="danger">特级</van-tag>
          </div>
        </div>
        <div class="ticket-content">
          <div class="ticket-info">
            <div class="ticket-header">工单类别：{{ ticket.workOrderType==1?'维修' : ticket.workOrderType==2?'维保' : '巡检' }}</div>
            <div class="ticket-id">开始时间：{{ ticket.workOrderTime }}</div>
          </div>
          <div class="ticket-actions">
            <van-button square v-if="ticket.status==1" type="primary" size="small" @click="handleTicket(ticket.workOrderId)">处理</van-button>
            <van-button square v-if="ticket.status==2" type="primary" size="small" >已完成</van-button>
            <van-button square v-if="ticket.status==3" type="primary" size="small" >已关闭</van-button>
<!--            <van-button v-if="ticket.status=1" square type="primary" size="small" @click="handleTicket(ticket.workOrderId)">详情</van-button>-->
<!--            <van-button v-if="ticket.status=2" square type="primary" size="small" @click="handleTicket(ticket.workOrderId)">已完成</van-button>-->
<!--            <van-button v-if="ticket.status=3" square type="primary" size="small" @click="handleTicket(ticket.workOrderId)">已关闭</van-button>-->
          </div>
        </div>
      </div>
    </div>
  </div>


</template>

<style scoped>
.ticket-view {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-top: 46px;
}

.filter-container {
  position: sticky;
  top: 46px;
  z-index: 10;
}

:deep(.van-dropdown-menu) {
  background-color: #fff;
}

.ticket-list {
  padding: 12px;
}

.ticket-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebedf0;
}

.ticket-id {
  font-size: 14px;
  color: #323233;
}

.ticket-priority {
  font-size: 14px;
  font-weight: 500;
}

.ticket-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ticket-info {
  font-size: 13px;
  color: #646566;
  line-height: 1.5;
}

:deep(.van-button--primary) {
  background-color: #1989fa;
  border-color: #1989fa;
}

:deep(.van-button--success) {
  background-color: #07c160;
  border-color: #07c160;
}
</style>